<template>
  <div id="breadcrumb-container" class="breadcrumb-view">
    <draggable v-model="menus" class="drag-container">
      <context-menu :menuContext="menuContext" @onSelected="onSelected">
        <el-tag
          ref="tag"
          v-for="(item, index) in menus"
          :key="new Date().getTime() + index"
          class="el-tag"
          :class="[activePath == item.path ? 'active' : '']"
          effect="dark"
          :disable-transitions="true"
          style="margin-right: 6px"
          @click="handleLink(item)"
        >
          <span>{{ item.meta.title ? item.meta.title : "暂无权限" }}</span>
          <span
            v-if="item.path != '/' && item.path != '/index'"
            class="close el-icon-close"
            @click="onClose(item, index)"
          />
        </el-tag>
      </context-menu>
    </draggable>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import draggable from "vuedraggable";
import ContextMenu from "@/components/context-menu";
export default {
  components: {
    draggable,
    ContextMenu,
  },
  data() {
    return {
      activePath: "/",
      tags: ["success", "info", "warning", "danger"],
      menus: [],
      menuContext: [
        {
          label: "关闭当前",
          key: "close",
        },
        {
          label: "关闭其他",
          key: "ohter",
        },
        {
          label: "关闭全部",
          key: "all",
        },
        {
          label: "关闭右侧",
          key: "right",
        },
        {
          label: "关闭左侧",
          key: "left",
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["open_menus"]),
  },
  watch: {
    $route: {
      handler(to) {
        this.activePath = to.path;
      },
      immediate: true,
    },
    open_menus: {
      deep: true,
      handler(val) {
        this.menus = val.filter((item) => item.meta.title);
      },
      immediate: true,
    },
  },
  mounted() {
    // 禁用鼠标右键事件
    document.oncontextmenu = function () {
      return false;
    };
  },
  methods: {
    handleLink(item) {
      this.$router.push(
        {
          name: item.name,
          query: {
            menuId: item.name,
          },
        },
        (res) => {
          console.log(res);
        }
      );
    },
    onClose(item, index) {
      // 删除当前菜单
      this.$store.dispatch("app/closeMenu", item);
    },
    onSelected(data) {
      console.log(data);
    },
  },
};
</script>

<style lang="scss" scoped>
.breadcrumb-view {
  width: 100%;

  .link {
    font-weight: bold;
    cursor: pointer;

    &:hover {
      color: #000;
    }
  }
}

.drag-container {
  display: flex;
}

.el-tag {
  background: var(--body-background);
  color: var(--main-color);
  border: 1px solid var(--main-border);
  transition: all 0.58s ease-in-out !important;

  &:hover {
    color: var(--main-hover);
    border: 1px solid var(--main-hover);
    cursor: pointer;

    .close {
      margin: 0 2px 0px 6px;
      display: inline-block;
      width: 16px;
      height: 16px;
      &:hover {
        background: var(--main-hover);
        color: var(--main-hover-color);
      }
    }
  }

  .close {
    display: none;
  }
}

.active {
  background: var(--body-color);
  color: var(--main-hover-color);

  &:hover {
    color: var(--main-hover-color) !important;
  }
}

::v-deep {
  .el-tag--dark .el-tag__close {
    color: var(--main-color) !important;
  }
}
</style>